import React, { Component } from 'react';
import p1 from '../state/1.gif'
import p2 from '../state/2.gif'
import p3 from '../state/3.gif'
import p4 from '../state/4.gif'
import p5 from '../state/5.gif'
import p6 from '../state/6.gif'
import p7 from '../state/7.gif'
import p8 from '../state/8.gif'
import p9 from '../state/9.gif'
import p10 from '../state/10.gif'

import './list.scss'
class List extends Component {
    constructor(props) {
        super(props);
        this.state = {//加上this,this代表组件实例
            arr: [
                { name: '护肤', pic: p1 },
                { name: '彩妆', pic: p2 },
                { name: '香氛', pic: p3 },
                { name: '进口酒', pic: p4 },
                { name: '国产酒', pic: p5 },
                { name: '精品奢货', pic: p6 },
                { name: '食品百货', pic: p7 },
                { name: '母婴专区', pic: p8 },
                { name: '直播专区', pic: p9 },
                { name: '特卖专场', pic: p10 },
            ]
        }
    }

    render() {
        return (
            <div className='box'>
                {
                    // 条件渲染map
                    this.state.arr.map((item, index) => {
                        return (
                            <div className="list" key={index} >
                                {/* 变量为属性值时，不用加引号，用{}括起来 */}
                                <img src={item.pic} alt="" />
                                <span>{item.name}</span>
                            </div>
                        )
                    })

                }

            </div>
        );
    }
}

export default List;